{% extends template_inherits %}

{% block head %}

    <link rel="stylesheet" type="text/css" href="/media/js/ext-3.0.0/resources/css/ext-all.css" />

    <script type="text/javascript" src="/media/js/ext-3.0.0/adapter/ext/ext-base.js"></script>
    <script type="text/javascript" src="/media/js/ext-3.0.0/ext-all.js"></script>

    <script type="text/javascript" src="/media/js/utilities.js"></script>
    <script type="text/javascript" src="/media/js/django-ext/tree.js"></script>

    <style type="text/css">
        img.mycls {
            background:url('/media/js/ext-3.0.0/resources/images/default/tree/leaf.gif') no-repeat top left !important;
        }
    </style>

    <script type="text/javascript">

Ext.onReady(function(){

    init_tree({{ config|safe }});

});

/*
Ext.onReady(function(){

    var Tree = Ext.tree;

    var tree = new Tree.TreePanel({
        useArrows: true,
        autoScroll: true,
        animate: true,
        enableDD: true,
        containerScroll: true,
        border: false,
        // auto create TreeLoader
        dataUrl: '{{ json_tree_url }}',

        root: {
            nodeType: 'async',
            text: '{{ model }}',
            draggable: false,
            id: 'root'
        },

        tbar: [
            {% if rights.add %}
               new Ext.Toolbar.Button({
                    text: 'Add',
                    id:'bAdd',
                    handler: function(){
                        create_form_window(0);
                    }
                }),
            {% endif %}
        ]


    });

    // render the tree
    tree.render('tree-div');
    tree.getRootNode().expand();


    var oldPosition = null;
    var oldNextSibling = null;

    tree.on('startdrag', function(tree, node, event){
        oldPosition = node.parentNode.indexOf(node);
        oldNextSibling = node.nextSibling;
    });

    tree.on('dblclick', function(node, eventobject){
        //node.leaf=false;
    });

    tree.on('movenode', function(tree, node, oldParent, newParent, position){

        if (oldParent == newParent){
            var url = '{{ json_reorder_url }}';
            var params = {'node':node.id, 'delta':(position-oldPosition)};
        } else {
            var url = '{{ json_reparent_url }}';
            var params = {'node':node.id, 'parent':newParent.id, 'position':position};
        }

        //if (oldParent.firstChild == null) {
        //    oldParent.ui.removeClass('x-tree-node-icon');
        //    oldParent.ui.addClass('x-tree-node-collapsed');

            //alert('oop');
        //}

        // we disable tree interaction until we've heard a response from the server
        // this prevents concurrent requests which could yield unusual results

        tree.disable();

        Ext.Ajax.request({
            url:url,
            params:params,
            success:function(response, request) {

                // if the first char of our response is zero, then we fail the operation,
                // otherwise we re-enable the tree

                if (response.responseText.charAt(0) != 1){
                    request.failure();
                } else {
                    tree.enable();
                }
            },
            failure:function() {

                // we move the node back to where it was beforehand and
                // we suspendEvents() so that we don't get stuck in a possible infinite loop

                tree.suspendEvents();
                oldParent.appendChild(node);
                if (oldNextSibling){
                    oldParent.insertBefore(node, oldNextSibling);
                }

                tree.resumeEvents();
                tree.enable();

                alert("Oh no! Your changes could not be saved!");
            }

        });

    });



});*/

    </script>

{% endblock %}


{% block content %}

    <p>{{ description }}</p>

    <br>

    <div id="tree-div" style="overflow:auto; height:300px;width:250px;border:1px solid #c3daf9;"></div>

{% endblock %}
